<template>
  <div class="searchSuggest">
    <p>搜索提示</p>
    <ul>
      <li
        v-for="item in suggestList"
        :key="item.id"
        @click="$emit('searchindex', item.name)"
      >
        <i class="icon"
          ><span>{{ item.name }}</span></i
        >
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ["keywords"],
  data() {
    return {
      suggestList: [],
      isSuccess: true, //防抖
    };
  },
  created() {
    this.getSuggest(this.keywords);
  },
  watch: {
    keywords(newVal) {
      //   console.log("keywords==>", this.keywords);
      this.getSuggest(newVal);
    },
  },
  methods: {
    getSuggest(keyword) {
      if (!this.isSuccess) return;
      this.isSuccess = false;
      this.$http
        .get("/search/suggest", {
          params: {
            keywords: keyword,
          },
        })
        .then((d) => {
          //   console.log('搜索结果==>',d);
          let order = d.data.result.order;
          let result = [];
          //循环所有order里面数据，作为数据结果key
          for (let i = 0; i < order.length; i++) {
            result = result.concat(d.data.result[order[i]]);
          }
          this.suggestList = result;
          this.isSuccess = true;
          //   this.suggestList=d.data.result.songs;
          //   this.suggestList=this.suggestList.concat(d.data.result.artists);
        });
    },
  },
};
</script>
<style lang="less" scoped>
.searchSuggest {
  padding: 15px 10px 0;
  p {
    margin-left: 8px;
    font-size: 12px;
    line-height: 12px;
    color: #666;
  }
  ul {
    padding: 0 10px;
    li {
      height: 45px;
      line-height: 45px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      i.icon {
        align-items: center;
        width: 15px;
        height: 15px;
        background-image: url();
        background-repeat: no-repeat;
        padding-left: 17px;
        span {
        }
      }
    }
  }
}
</style>